<template :v-if='type=="video"'>
    <router-link class="lineitem" :to="'/video/'+item.bvid">
        <div class="pic" v-if='type=="video"'>
            <img :src="item.pic+'@480w_270h_1c.webp'" alt="">
            <span class="bg">{{item.duration}}</span>
            <span>{{item.duration}}</span>
        </div>
        <div class="upic" v-else-if="type=='bili_user'">
            <img :src="item.upic+'@120w_120h_1c.png'" alt="">
        </div>
         <div class="cover" v-else>
            <img :src="item.cover+'@156w_208h_1c.png'" alt="">
        </div>
        <div class="info">
            <p class="type" v-if='type=="media_ft"' style="margin-bottom:0">
                <svg t="1605426394045" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1872" width="200" height="200"><path d="M973.22666667 444.69333333h-37.86666667V266.13333333c0-17.6-11.09333333-34.02666667-28.16-38.61333333-25.70666667-6.93333333-49.06666667 12.58666667-49.06666667 37.22666667v179.94666666h-692.26666666V266.13333333c0-17.6-11.09333333-34.02666667-28.16-38.61333333-25.70666667-6.93333333-49.06666667 12.58666667-49.06666667 37.22666667v179.94666666H50.77333333c-9.06666667 0-16.53333333 7.46666667-16.53333333 16.53333334v86.4c0 9.06666667 7.46666667 16.53333333 16.53333333 16.53333333h28.58666667v89.81333333c0 79.14666667 64.74666667 143.89333333 143.89333333 143.89333334h122.24c79.14666667 0 143.89333333-64.74666667 143.89333334-143.89333334v-22.08c0-4.58666667 3.73333333-8.21333333 8.21333333-8.21333333h28.69333333c4.58666667 0 8.21333333 3.73333333 8.21333334 8.21333333v22.08c0 79.14666667 64.74666667 143.89333333 143.89333333 143.89333334h122.24c79.14666667 0 143.89333333-64.74666667 143.89333333-143.89333334v-89.81333333h28.58666667c9.06666667 0 16.53333333-7.46666667 16.53333333-16.53333333v-86.4c0.10666667-9.17333333-7.36-16.53333333-16.42666666-16.53333334z" fill="#E5E6E6" p-id="1873"></path><path d="M338.56 734.82666667H229.33333333c-50.88 0-92.58666667-41.6-92.58666666-92.58666667V557.86666667c0-35.62666667 29.12-64.74666667 64.74666666-64.74666667h164.69333334c35.62666667 0 64.74666667 29.12 64.74666666 64.74666667v84.48c0.10666667 50.88-41.49333333 92.48-92.37333333 92.48z" fill="#FF5C7A" p-id="1874"></path><path d="M685.44 734.82666667H794.66666667c50.88 0 92.58666667-41.6 92.58666666-92.58666667V557.86666667c0-35.62666667-29.12-64.74666667-64.74666666-64.74666667H657.70666667c-35.62666667 0-64.74666667 29.12-64.74666667 64.74666667v84.48c0 50.88 41.6 92.48 92.48 92.48z" fill="#2CBAE5" p-id="1875"></path></svg>
                电影
            </p>
            <p class="type" v-if="type=='media_bangumi'">
                <svg t="1605426768112" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2132" width="200" height="200"><path d="M602.24 345.6l-14.08-8.64 177.6-244.26666667c11.84-16.32 8.21333333-39.46666667-8.10666667-51.30666666-16.32-11.84-39.46666667-8.21333333-51.30666666 8.10666666L525.44 298.24 238.50666667 121.6c-17.17333333-10.56-39.89333333-5.22666667-50.56 12.05333333-10.56 17.17333333-5.22666667 39.89333333 12.05333333 50.56L482.13333333 357.86666667l-26.98666666 37.12c-11.84 16.32-8.21333333 39.46666667 8.10666666 51.30666666 16.32 11.84 39.46666667 8.21333333 51.30666667-8.10666666l30.29333333-41.70666667 18.88 11.62666667c17.17333333 10.56 39.89333333 5.22666667 50.56-12.05333334 10.56-17.17333333 5.22666667-39.89333333-12.05333333-50.45333333z" fill="#FB813A" p-id="2133"></path><path d="M809.17333333 926.29333333m-63.14666666 0a63.14666667 63.14666667 0 1 0 126.29333333 0 63.14666667 63.14666667 0 1 0-126.29333333 0Z" fill="#FB813A" p-id="2134"></path><path d="M214.82666667 926.29333333m-63.14666667 0a63.14666667 63.14666667 0 1 0 126.29333333 0 63.14666667 63.14666667 0 1 0-126.29333333 0Z" fill="#FB813A" p-id="2135"></path><path d="M874.56 938.56H149.44c-41.92 0-76.16-34.24-76.16-76.16V368.42666667c0-41.92 34.24-76.16 76.16-76.16h725.01333333c41.92 0 76.16 34.24 76.16 76.16v493.97333333c0.10666667 41.92-34.13333333 76.16-76.05333333 76.16z" fill="#FDDE80" p-id="2136"></path><path d="M521.38666667 600.64m-151.78666667 0a151.78666667 151.78666667 0 1 0 303.57333333 0 151.78666667 151.78666667 0 1 0-303.57333333 0Z" fill="#FFFFFF" p-id="2137"></path><path d="M470.08 511.04c0-1.06666667 0.74666667-1.6 1.81333333-1.06666667L626.98666667 599.46666667c0.96 0.53333333 0.96 1.49333333 0 2.02666666l-155.09333334 89.49333334c-0.96 0.53333333-1.81333333 0.10666667-1.81333333-1.06666667V511.04z" fill="#FB813A" p-id="2138"></path></svg>
                {{item.season_type_name}}
            </p>
            <p class="title" v-html="item.title" v-if="item.title"></p>
            <block v-if='type=="video"'>
                <span class="iconfont icon-UPzhu author">{{item.author}}</span>
                <div class="detail">
                    <span class="iconfont icon-play_rectangle play">{{item.play>10000?((item.play/10000).toFixed(1)+'万'):item.play}}</span>
                    <span class="iconfont icon-danmushu review">{{item.video_review>10000?((item.video_review/10000).toFixed(1)+'万'):item.video_review}}</span>
                </div>
            </block>
            <block v-if="type=='media_ft'">
                <span>地区：{{item.areas}}</span>
                <span>演员：{{item.cv}}</span>
                <span>{{item.staff}}</span>
            </block>
            <block class="user_info" v-if="type=='bili_user'">
                <p class="title" v-html="item.uname"></p>
                <span>
                    粉丝：{{item.fans}} 视频：{{item.videos}}
                </span>
                <span style="">{{item.usign}}</span>
            </block>
        </div>
    </router-link>
</template>

<script>
export default {
    props:[
        'type',
        'item'
    ],
    created(){
    }

}
</script>

<style lang='less'>
@import '../../assets/css/common';

.keyword{
    color: @color;
    font-style: normal;
}
</style>
<style lang="less" scoped>
@import '../../assets/css/iconfont';
.lineitem{
    display: flex;
    padding: 0.8rem 0.5rem 0  0.5rem;
    .cover{
        height: 8.7rem;
        padding:0.2rem 0.2rem  0.8rem 0.5rem;
        img{
            height: 8.7rem;
            border-radius: 0.3rem;
        }
    }
    .upic{
        padding:0.5rem 1rem;
        height: 5rem;
        img{
            border-radius: 10rem;
            height: 5rem;
            width: 5rem;
        }
    }
    .pic{
        height: 6.84rem;
        position: relative;
        span{
            &.bg{
                background-color: #000;
                opacity: 0.5;
            }
            position: absolute;
            bottom: 0.5rem;
            right: 0.4rem;
            font-size: 1rem;
            color: white;
            border-radius: 0.2rem;
        }
        img{
            height: 6.84rem;
            width: 11.7rem;
            border-radius: 0.5rem;
        }
    }
    .info{
        margin-left: 0.8rem;
        color: #999;
        .type{
            color: black;
            margin: 0.4rem 0 0.8rem 0;
            display: flex;
            align-items: center;
            svg{
                width: 1.4rem;
                margin-right: 0.5rem;
                height: 1.4rem;
            }
        }
        .title{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            color: black;
            margin-bottom: 0.4rem;
        }
        .detail{
            display: flex;
            .play{
                &::before{
                    font-size: 1.3rem;
                }
            }
            .review{
                margin-left: 1rem;
                &::before{
                    font-size: 1.3rem;
                }
            }
        }
        span{
            font-size: 1rem;
            padding: 0.23rem 0.5rem 0 0;
            display: block;
            width: fit-content;
            align-items: center;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            max-width: 22rem;
            &::before{
                margin-right: 0.4rem;
                font-size: 1.3rem;
            }
        }
        .user_info{
            .title{
                padding:0.5rem 0 0.3rem 0;
            }
        }
    }
}
</style>